<script setup lang="ts">
import { defineProps, defineEmits, computed, ref } from 'vue'
import { useRouterPush } from '@/composables';

const visible = ref(false)

const checkbox = ref(false)

const { toPrivacy } = useRouterPush()

const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    amt: {
        type: Number,
        required: true
    },
    status: {
        type: String,
        default: ''
    },
    isOrder: {
        type: Boolean,
        default: false
    },
    formData: {
        type: Object,
        required: true
    },
})
const statusComputed = computed(() => {
    switch (props.status) {
        case "1":
            return '待支付';
        case "2":
            return '已支付';
        case "3":
            return '已取消';
        case "4":
            return '已评价';
        case "5":
            return '退款中';
        case "6":
            return '退款异常';
        case "7":
            return '退款成功';
        default:
            return '未知状态';
    }
})

// 获取状态对应的颜色和图标
const getStatusInfo = computed(() => {
    switch (props.status) {
        case "1":
            return {
                color: 'text-orange-600',
                bgColor: 'bg-orange-50',
                borderColor: 'border-orange-200',
                icon: '⏰',
                text: '待支付'
            };
        case "2":
            return {
                color: 'text-green-600',
                bgColor: 'bg-green-50',
                borderColor: 'border-green-200',
                icon: '✅',
                text: '已支付'
            };
        case "3":
            return {
                color: 'text-gray-600',
                bgColor: 'bg-gray-50',
                borderColor: 'border-gray-200',
                icon: '❌',
                text: '已取消'
            };
        case "4":
            return {
                color: 'text-blue-600',
                bgColor: 'bg-blue-50',
                borderColor: 'border-blue-200',
                icon: '⭐',
                text: '已评价'
            };
        case "5":
            return {
                color: 'text-yellow-600',
                bgColor: 'bg-yellow-50',
                borderColor: 'border-yellow-200',
                icon: '🔄',
                text: '退款中'
            };
        case "6":
            return {
                color: 'text-red-600',
                bgColor: 'bg-red-50',
                borderColor: 'border-red-200',
                icon: '⚠️',
                text: '退款异常'
            };
        case "7":
            return {
                color: 'text-green-600',
                bgColor: 'bg-green-50',
                borderColor: 'border-green-200',
                icon: '💰',
                text: '退款成功'
            };
        default:
            return {
                color: 'text-gray-600',
                bgColor: 'bg-gray-50',
                borderColor: 'border-gray-200',
                icon: '❓',
                text: '未知状态'
            };
    }
})

// 获取状态描述
const getStatusDescription = (status: string) => {
    switch (status) {
        case "1":
            return '请及时完成支付，避免订单超时';
        case "2":
            return '支付成功，服务即将开始';
        case "3":
            return '订单已取消，如有疑问请联系客服';
        case "4":
            return '服务已完成，感谢您的评价';
        case "5":
            return '退款申请已提交，请耐心等待';
        case "6":
            return '退款处理异常，请联系客服处理';
        case "7":
            return '退款已成功，请注意查收';
        default:
            return '订单状态异常，请联系客服';
    }
}

const emit = defineEmits(['submit', 'close'])



</script>

<template>
    <view class="w-full bg-white h-100px z-36 pos-fixed pos-bottom-0px pos-left-0 flex-col-center">
        <!-- 订单状态提示 -->
        <view v-if="props.status && props.status !== '1'" class="w-full px-4 py-1">
            <view :class="`${getStatusInfo.bgColor} ${getStatusInfo.borderColor} border-l-4 p-2 rounded-r`">
                <view class="flex items-center">
                    <text class="text-base mr-2">{{ getStatusInfo.icon }}</text>
                    <view class="flex-1">
                        <view :class="`text-xs font-medium ${getStatusInfo.color}`">
                            {{ getStatusInfo.text }}
                        </view>
                        <view class="text-xs text-gray-500 mt-0.5">
                            {{ getStatusDescription(props.status) }}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 协议勾选区域 -->
        <view v-if="!isOrder || props.status == '1'" class="px-2 h-1/2 flex-center">
            <nut-checkbox v-model="checkbox" />
            <text class="text-11px w-full text-#000">
                支付即表示同意
                <i class="text-#059669" @click="toPrivacy('1795813205685743618')">《服务须知,注意事项和技术操作知情同意书》</i>
                中的全部条款内容
            </text>
        </view>
        <!-- 支付按钮区域 -->
        <view class="w-full h-1/2 flex justify-around">
            <view class="mr-2 flex justify-between w-full items-center">
                <!-- 新订单或待支付状态 -->
                <view v-if="!isOrder || props.status == '1'" class="ml-2 flex-col-center items-start">
                    <view class="text-lg">
                        合计：<nut-price :price="amt" />
                    </view>
                    <view class="text-xs">
                        共减：<nut-price :price="formData.specialAmt" />
                    </view>
                </view>
                
                <!-- 付款按钮 -->
                <nut-button v-if="!isOrder || props.status == '1'" :loading="loading" :disabled="!checkbox"
                    @click="emit('submit')" class="important:w-180px font-bold text-lg" type="primary">
                    立即支付￥{{ amt - formData.specialAmt }}
                </nut-button>
                
                <!-- 其他状态显示 -->
                <view v-else class="w-full flex justify-between items-center">
                    <view class="flex-col-center items-start">
                        <view class="text-lg font-bold">合计￥：{{ amt }}</view>
                        <view class="text-sm text-gray-500 mt-1">
                            <text :class="getStatusInfo.color">{{ getStatusInfo.icon }} {{ getStatusInfo.text }}</text>
                        </view>
                    </view>
                    <!-- 取消订单按钮（仅对已支付状态显示） -->
                    <nut-button v-if="props.status === '2'" type="default" size="small" @click="visible = true">
                        取消订单
                    </nut-button>
                </view>
            </view>
        </view>
        <nut-dialog title="提示" content="是否取消该订单？" v-model:visible="visible" @cancel="visible = false"
            @ok="emit('close')" />
    </view>
</template>

<style scoped></style>